<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">个人中心</small>
      </a>
    </header>
    <main>
      <section class="profile-number">
        <div class="profile-link">
          <div class="info-box">
            <img src="../../../static/img/user.png" />
            <br>
            <p>{{this.datalist.user.name}}</p>
          </div>
        </div>
      </section>
      <div class="userinfo">
        <router-link :to='{name: "Changepsd"}'>
          <aside><img src="../../../static/img/1.png"></aside>
          <div class="infos">
            <span>修改密码</span>
            <span><i class="el-icon-arrow-right cor_01"></i></span>
          </div>
        </router-link>
        <a>
          <aside><img src="../../../static/img/2.png"></aside>
          <div class="infos">
            <span>所属企业</span>
            <span>{{this.datalist.enterprise.name}}</span>
          </div>
        </a>
        <a>
          <aside><img src="../../../static/img/3.png"></aside>
          <div class="infos">
            <span>日常监管网格</span>
            <span>{{this.datalist.enterprise.govDepartment}}</span>
          </div>
        </a>
      </div>
      <div class="loginout">
        <button @click="logout">退出登录</button>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    requestLogin
  } from '../../api/api';
  export default {
    data() {
      return {
        datalist: {}
      };
    },
    methods: {
      getdata: function() {
        let options = {
          params: {
            loginname: JSON.parse(localStorage.getItem('auth')).loginname,
            password: JSON.parse(localStorage.getItem('auth')).password,
            ip: "",
            deviceid: ""
          }
        };
        requestLogin(options).then((res) => {
          if (res.success === true) {
            this.datalist = res.data;
          }
        })
      },
      logout() {
        this.$confirm('确定要立即退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          localStorage.removeItem('auth');
          this.$router.push({
            path: '/login'
          });
        }).catch(() =>{});
      }
    },
    //页面加载时候
    mounted() {
  
    },
    created() {
      this.getdata()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  html {
    background: #efefef;
  }
  
  .profile-number .profile-link {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url(../../../static/img/bgs.png) no-repeat;
    padding: 1rem 0rem;
    justify-content: center;
  }
  
  .info-box {
    text-align: center;
    color: #fff;
    font-size: 1rem;
    img {
      width: 4.5rem;
      height: 4.5rem;
    }
    p {
      margin-bottom: 0px;
    }
  }
  
  .userinfo a {
    display: flex;
    aside {
      width: 3rem;
      height: 3rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      line-height: 3rem;
      justify-content: center;
      img {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
    .infos {
      width: 100%;
      border-bottom: 1px solid #f1f1f1;
      height: 3rem;
      font-size: 1rem;
      color: #333;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      line-height: 3rem;
    }
  }
  
  .cor_01 {
    color: rgb(187, 187, 187)
  }
  
  .infos span:last-child {
    margin-right: 5px
  }
  
  .loginout {
    width: 85%;
    margin: 4rem auto 2rem;
    button {
      color: #fff;
      background: #008c3f;
      text-align: center;
      width: 100%;
      height: 2.5rem;
      border: none;
      font-size: 1rem;
    }
  }
</style>
